/**
 * @Description:
 * @Author bianpengfei
 * @create 2021/6/24 9:34
 */
import React, { PureComponent, Suspense, lazy } from 'react'
import { Menu, Spin } from 'antd'
import PropTypes from 'prop-types'
import scoped from './index.module.less'
import { Route, Switch } from 'react-router-dom'

const { SubMenu } = Menu

const SpinFn = () => {
  console.log('SpinFn', this)
  return (
    <div className={'ant-loading'}>
      <Spin></Spin>
    </div>
  )
}

class Index extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {}
    console.log(scoped)
  }

  handleClick = ({ item, key, keyPath, domEvent }) => {
    const { history } = this.props
    history.push(key)
  }

  render() {
    return (
      <div className={[scoped['g-app-container']]}>
        <div className={scoped['g-app__header']}></div>
        <div className={scoped['g-app__body']}>
          <div className={scoped['g-app__lt']}>
            <Menu
              onClick={this.handleClick}
              style={{ width: 256 }}
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              mode="inline"
            >
              <SubMenu key="sub1" title="菜单导航">
                <Menu.ItemGroup key="g1" title="父菜单一">
                  <Menu.Item key="/index/page/1">跳转页面A</Menu.Item>
                  <Menu.Item key="/index/page/2">跳转页面B</Menu.Item>
                  <Menu.Item key="/index/new/list">跳转列表页面</Menu.Item>
                  <Menu.Item key="/index/count-demo">计数器例子</Menu.Item>
                  <Menu.Item key="/index/hooks/usestate">Hooks useState</Menu.Item>
                  <Menu.Item key="/index/hooks/createcontext">Hooks createContext</Menu.Item>
                  <Menu.Item key="/index/hooks/errorboundary">Hooks errorBoundary</Menu.Item>
                </Menu.ItemGroup>
              </SubMenu>
            </Menu>
          </div>
          <div className={scoped['g-app__rt']}>
            <Suspense fallback={<SpinFn></SpinFn>}>
              <Switch>
                <Route exact path={'/index/page/:id'} component={lazy(() => import('@/views/NewsDetail/'))}></Route>
                <Route exact path={'/index/new/list'} component={lazy(() => import('@/views/NewList/'))}></Route>
                <Route exact path={'/index/count-demo'} component={lazy(() => import('@/views/Count'))}></Route>
                <Route
                  exact
                  path={'/index/hooks/usestate'}
                  component={lazy(() => import('@/views/extenstion/use-state'))}
                ></Route>
                <Route
                  exact
                  path={'/index/hooks/createcontext'}
                  component={lazy(() => import('@/views/extenstion/create-context'))}
                ></Route>
                <Route
                  exact
                  path={'/index/hooks/renderprops'}
                  component={lazy(() => import('@/views/extenstion/render-props'))}
                ></Route>
                <Route
                  exact
                  path={'/index/hooks/errorboundary'}
                  component={lazy(() => import('@/views/extenstion/error-boundary'))}
                ></Route>
                <Route exact path={'/input-1'} component={lazy(() => import('@/components/Input-1.js'))}></Route>
                <Route exact path={'/input-2'} component={lazy(() => import('@/components/Input-2.js'))}></Route>
                <Route exact path={'/input-3/:id'} component={lazy(() => import('@/components/Input-3.js'))}></Route>
              </Switch>
            </Suspense>
          </div>
        </div>
      </div>
    )
  }
}

Index.propTypes = {}

export default Index
